<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <el-row>
        <el-col :span="15">
          <p class="pinformation">搜索条件</p>
        </el-col>
      </el-row>
      <el-row>
        <el-form :model="queryParams" ref="queryRef" label-width="80">
          <el-row>
            <el-col :span="10">
              <el-form-item label="仪器名称：" prop="name">
                <el-input
                  maxlength="100"
                  v-model="queryParams.name"
                  placeholder="请输入仪器名称"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="仪器编号：" prop="number">
                <el-input
                  maxlength="100"
                  v-model="queryParams.number"
                  placeholder="请输入仪器编号"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-row justify="center">
                <el-button type="success" @click.enter="handleQuery">搜索</el-button>
              </el-row>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="仪器型号：" prop="code">
                <el-input
                  maxlength="100"
                  v-model="queryParams.code"
                  placeholder="请输入仪器型号"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>

            <el-col :span="11">
              <el-form-item label="仪器状态：" prop="storeStatus">
                <el-select
                  v-model="queryParams.storeStatus"
                  placeholder="请输入仪器状态"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in isUse"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-row justify="center">
                <el-button class="resetBtn" @click="resetQuery">重置</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row style="justify-content: space-between">
        <p class="pinformation" style="margin-top: 8px">仪器档案列表</p>
        <p class="totalStyle" style="margin-top: 6px">共 {{ total }} 条数据</p>
      </el-row>

      <el-table
        ref="mainTableRef"
        class="business"
        v-loading="loading"
        :highlight-current-row="highLightRow"
        :data="instrumentTable"
      >
        <el-table-column label="仪器名称" align="center" prop="name" />
        <el-table-column label="仪器编号" align="center" prop="number" />
        <el-table-column label="仪器型号" align="center" prop="code" />
        <el-table-column label="状态" align="center" prop="storeStatus">
          <template #default="scope">
            {{ !scope.row.storeStatus ? "在库" : "已出库" }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-card class="rightCard">
      <!-- 搜索条件区域 -->
      <el-row>
        <el-col :span="2">
          <p class="pinformation">搜索条件</p>
        </el-col>
      </el-row>
      <el-form label-width="120px" :model="searchOutinForm" ref="searchOutinRef">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仪器名称：" prop="name">
              <el-input
                clearable
                maxlength="100"
                v-model="searchOutinForm.name"
                @keyup.enter="getListOutin"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仪器型号：" prop="code">
              <el-input
                clearable
                maxlength="100"
                v-model="searchOutinForm.code"
                @keyup.enter="getListOutin"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仪器编号：" prop="number">
              <el-input
                maxlength="100"
                v-model="searchOutinForm.number"
                @keyup.enter="getListOutin"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="领用时间段：">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="领用人：" prop="outUserId">
              <el-select
                v-model="searchOutinForm.outUserId"
                style="width: 100%"
                filterable
                clearable
              >
                <el-option
                  v-for="item in proxy.addListNoLimit(userList, 'userId', 'nickName')"
                  :value="item.userId"
                  :key="item.userId"
                  :label="item.nickName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="记录状态：" prop="status">
              <el-select
                v-model="searchOutinForm.status"
                placeholder="请选择记录状态"
                clearable
                filterable
              >
                <el-option
                  v-for="item in statusList"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-row justify="end">
              <el-button type="success" @click="getListOutin">搜索</el-button>
              <el-button class="resetBtn" @click="resetBtn">重置</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- /搜索条件区域 -->

      <!-- 技术指标表格 -->
      <el-row>
        <p class="pinformation">出入库记录</p>
        <p class="totalStyle">共 {{ OtinTotal }} 条数据</p>
        <el-row style="padding-bottom: 5px" justify="end">
          <el-button link icon="FolderChecked" type="success" @click="exportDateFormPdf"
            >导出出入库记录</el-button
          >
        </el-row>
      </el-row>

      <el-table
        ref="sub1TableRef"
        class="business"
        v-loading="targetTableLoading"
        :highlight-current-row="highLightRow"
        :data="targetList"
      >
        <el-table-column label="仪器编号" align="center" prop="instrument.number" />
        <el-table-column label="仪器名称" align="center" prop="instrument.name" />
        <el-table-column label="仪器型号" align="center" prop="instrument.code" />
        <el-table-column label="领用日期" align="center" prop="outUserTime" />
        <el-table-column label="领用人" align="center" prop="outUserName" />
        <el-table-column label="出库状态" align="center" prop="">
          <template #default="scope">
            <!-- <span v-if="scope.row.instrument.storeStatus == 1">正常</span>
            <span v-if="scope.row.instrument.storeStatus == 0">不正常</span> -->
            正常
          </template>
        </el-table-column>
        <el-table-column label="归还日期" align="center" prop="inUserTime" />
        <el-table-column label="入库状态" align="center">
          <template #default="scope">
            <!-- <span v-if="scope.row.instrument.storeStatus == 0">正常</span>
            <span v-if="scope.row.instrument.storeStatus == 1">不正常</span> -->
            正常
          </template>
        </el-table-column>
        <el-table-column label="保管人" align="center" prop="inAdminName" />
        <el-table-column label="状态" align="center" prop="storeStatus">
          <template #default="scope">
            {{ scope.row.inUserId ? "已归还" : "未归还" }}
          </template>
        </el-table-column>
      </el-table>
      <!-- /技术指标表格 -->
      <pagination
        v-show="OtinTotal > 0"
        :total="OtinTotal"
        v-model:page="searchOutinForm.pageNum"
        v-model:limit="searchOutinForm.pageSize"
        @pagination="getListOutin"
      />
    </el-card>
  </div>
</template>

<script setup name="Instrument">
import { listInstrument } from "@/api/resource/instrument";
import {
  listOutin,
  useOut,
  returnOut,
  useAdmin,
  returnAdmin,
  delOutin,
} from "@/api/resource/outin";
import { listUser } from "@/api/contract/check";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(0);
const instrumentTable = ref([]);
const highLightRow = ref(true);
const targetTableLoading = ref(false);
const dateRange = ref([]);
const searchOutinForm = ref({
  pageNum: 1,
  pageSize: 10,
  outUserId: -1,
  status: -1,
});

const isUse = ref([
  { label: "不限", value: -1 },
  { label: "在库", value: 0 },
  { label: "已出库", value: 1 },
]);
const statusList = ref([
  { label: "不限", value: -1 },
  { label: "未归还", value: 0 },
  { label: "已归还", value: 1 },
]);
onMounted(() => {
  nextTick(() => {
    getList();
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const heightParams = ref([
  { tableName: "main", bottomHeight: 73 },
  { tableName: "sub1", bottomHeight: 73 },
]);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    storeStatus: -1,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

/** 查询仪器档案列表 */
function getList() {
  loading.value = true;

  listInstrument(queryParams.value).then((response) => {
    instrumentTable.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 表单重置
function reset() {
  form.value = {};
  proxy.resetForm("");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

const OtinTotal = ref(0);
function getListOutin() {
  debugger;
  let temp = {
    "instrument.number": searchOutinForm.value.number,
    "instrument.code": searchOutinForm.value.code,
    "instrument.name": searchOutinForm.value.name,
    pageNum: searchOutinForm.value.pageNum,
    pageSize: searchOutinForm.value.pageSize,
    outUserId: searchOutinForm.value.outUserId,
    status: searchOutinForm.value.status,
  };
  listOutin(proxy.addDateRange(temp, dateRange.value)).then((res) => {
    targetList.value = res.rows;
    OtinTotal.value = res.total;
  });
}
getList();
getListOutin();

const targetList = ref([]);

function resetBtn() {
  proxy.resetForm("searchOutinRef");
  dateRange.value = [];
  getListOutin();
}

function exportDateFormPdf() {
  if(dateRange.value.length == 0){
    proxy.$modal.msgError("请选择领用时间！");
    return;
  }
  proxy.addDateRange(searchOutinForm.value, dateRange.value)
  if(searchOutinForm.value.params){
    Object.assign(searchOutinForm.value, searchOutinForm.value.params)
    delete searchOutinForm.value.params;
  }
  const params = {modelType: 16,params:searchOutinForm.value};
  proxy.download("/flowable/task/exportReportPdf", params, `仪器出入库记录.pdf`);
}
watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 73 },
        { tableName: "sub1", bottomHeight: 73 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 21 },
        { tableName: "sub1", bottomHeight: 73 },
      ];
    }
    getTableHeight();
  }
);

const userList = ref([]);
listUser().then((res) => {
  userList.value = res.data;
});
</script>

<style lang="scss" scoped>
.addBtnStyle {
  margin-left: -20px !important;
}

.el-col.el-col-8 {
  height: 47px !important;

  .el-checkbox-group {
    margin-top: -3px !important;
  }
}

.change {
  display: flex;
  justify-content: center;
}

.searchSectionBtn {
  // margin: 10px 0 10px 30px;
  margin-left: 50px;
}

.iconStyle {
  margin-right: 5px;
}
</style>
